<template>
	<view class="content">
		<view class="content-info">
			<view class="title">
				{{ detail?.title }}
			</view>
			<view class="sendTime">{{ detail?.sendUserName }} &nbsp; {{ detail?.sendTime }}</view>
			<view class="msg">
				{{ detail?.msgBody }}
			</view>
			<view class="remarks" v-if="detail?.remarks">
				<u-tag text="备注" plain size="mini" type="warning" plainFill></u-tag>
				<view class="remarks-text">会啊是大打撒十大算法会啊是大打撒十大算法会啊是大打撒十大算法会啊是大打撒十大算法</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { http } from '../../utils/http';
import { useUserStore } from '@/stores/useUserStore';
const props = defineProps({
	id: {
		type: String,
		default: ''
	}
});

onShow(() => {
	getInfo(props.id);
});

const detail = ref();
// 查询详情, 更新已读条数
async function getInfo(id: string) {
	const { data } = await http({
		url: `/system/sysmessage/get/${id}`,
		method: 'GET',
		data: {
			id: 1,
			url: 8989
		}
	});
	detail.value = data;
	useUserStore().getUnReadMessage();
}
</script>

<style lang="scss" scoped>
.content {
	background-color: #f7f8ff;
	overflow: hidden;

	// #ifndef APP-PLUS
	min-height: calc(100vh - 44px);
	// #endif

	// #ifdef APP-PLUS
	min-height: 100vh;
	// #endif

	.content-info {
		// width: 690rpx;
		height: auto;
		background-color: #fff;
		margin: 5px 30rpx;
		border-radius: 20px;
		padding: 20px 20px 40px;
		transition: all 300ms ease;
		.title {
			text-align: center;
			font-size: 16px;
			line-height: 30px;
			color: rgb(30, 50, 76);
			font-weight: 600;
			margin-bottom: 4px;
		}
		.sendTime {
			text-align: center;
			font-size: 13px;
			line-height: 26px;
			color: rgb(106, 114, 122);
			margin-bottom: 15px;
		}
		.msg {
			font-size: 14px;
			color: rgb(106, 116, 120);
			line-height: 22px;
		}
		.remarks {
			font-size: 14px;
			color: rgb(106, 116, 120);
			line-height: 22px;
			margin-top: 25px;
			.remarks-text {
				margin-top: 10px;
			}
		}
	}
}
</style>
